


import React, { useRef, useState } from 'react'
import { inject, observer } from 'mobx-react';
import { withRouter, Link } from 'react-router-dom';
import { ajax } from '../../api';
import { rolelist } from '../../utils/common';
import { Tag, Avatar, Modal, Tooltip, Dropdown, Menu, Form, Input } from 'antd';
import { ExclamationCircleOutlined, UserOutlined, CaretDownOutlined } from '@ant-design/icons';
import { baseURL } from '../../api/request';
import { reg } from '../../utils/validate';

function Head({ user, history }: any) {
    const [form] = Form.useForm()
    const [show, setShow] = useState(false)
    const myfile: any = useRef()
    const { userInfo, changeUserInfo } = user
    const { confirm } = Modal
    const onShow = () => {
        confirm({
            title: '你确定要退出登录吗?',
            icon: <ExclamationCircleOutlined />,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                sessionStorage.removeItem('token')
                changeUserInfo({
                    username: '',
                    phone: 0,
                    password: '',
                    avatar: '',
                    role: 0
                })
                history.push("/login")
            }
        });
    }
    const onInput = () => {
        myfile.current.click()
    }
    const uploadava = async () => {
        let file = myfile.current.files[0]
        let data = new FormData()
        data.append("avatar", file)
        let { code, result, path }: any = await ajax.uploadfile(data)
        if (code == 200) {
            ajax.changeinfo({ avatar: path })
                .then(res => {
                    changeUserInfo({ avatar: path })
                })
        }
    }
    const setpass = () => {
        setShow(true)
    }
    const handleOk = () => {
        form.validateFields()
            .then(async valid => {
                console.log(valid)
                let { code, result }: any = await ajax.updatepass(valid)
                if (code == 200) {
                    setShow(false)
                }
            })
    }
    const handleCancel = () => {
        setShow(false)
    }
    const menu = (
        <Menu>
            <Menu.Item>
                <Link to="/main/home">首页</Link>
            </Menu.Item>
            <Menu.Item>
                <Link to="/main/mine/mine">个人中心</Link>
            </Menu.Item>
            <Menu.Item>
                <a onClick={setpass}>修改密码</a>
            </Menu.Item>
        </Menu>
    )
    return (
        <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'space-between' }}>
            <h2>
                <img style={{ width: '150px', height: '50px' }} src="https://img2.baidu.com/it/u=420504203,421709972&fm=26&fmt=auto" alt="" />
            </h2>
            {
                userInfo && <div style={{ width: '300px', height: '100%', display: 'flex', justifyContent: 'space-between', color: '#fff', alignItems: 'center' }}>
                    <Tooltip title="更换头像">
                        <em onClick={onInput}>
                            <Avatar size={50} src={userInfo.avatar.replace(/public/, baseURL)} icon={<UserOutlined />} />
                            <input onChange={uploadava} ref={myfile} type="file" name="avatar" style={{ display: 'none' }} />
                        </em>
                    </Tooltip>
                    <Tag color={rolelist[userInfo.role - 1].color}>{rolelist[userInfo?.role - 1].text}</Tag>
                    <Dropdown overlay={menu} placement="bottomCenter" arrow>
                        <div>{userInfo.username}
                            <CaretDownOutlined />
                        </div>
                    </Dropdown>
                    <a onClick={onShow} style={{ color: 'orange' }}>退出</a>
                </div>
            }
            <Modal title="修改密码" visible={show} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
                <Form form={form}>
                    <Form.Item name="password" label="旧密码" rules={[{ required: true, message: '请输入旧密码' },
                    { pattern: reg.pwd, message: '6位数字加字母' }]}>
                        <Input.Password placeholder='请输入旧密码' />
                    </Form.Item>
                    <Form.Item name="newpassword" label="新密码" rules={[{ required: true, message: '请输入新密码' },
                    { pattern: reg.pwd, message: '6位数字加字母' }]}>
                        <Input.Password placeholder='请输入新密码' />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default inject("user")(withRouter(observer(Head)))